<template>
  <el-timeline :reverse="false" style="margin-top: 10px;">
    <div v-if="activities.length <= 0" style="padding-left: 10px;color: #909399;">
      <p>填写表单以预览时间线</p>
      <el-skeleton :rows="6" style="width: 480px" animated />
    </div>
    <el-timeline-item v-for="(act, index) in activities" :key="act.id" :type="timeLineType(act)" size="large"
      :timestamp="act.createDate" placement="top">
      <el-card v-if="act" shadow="never">
        <!-- 有任务的情况 -->
        <div slot="header" class="clearfix">
          <span>{{ act.taskName }}</span>
          <span style="font: 12px Extra Small; color: #909399; margin-left: 10px;">{{ (act.description || '') }}</span>
        </div>
        <div>
          <div style="display: inline-block;">
            <el-avatar style="background: #409EFF">{{ act.assign
              }}</el-avatar>
          </div>
          <div style="display: inline-block; min-height: 60px; vertical-align: middle; margin-left: 10px;">
            <div>{{ act.assign || '候选人' }}</div>
            <div v-if="act.finishDate" style="color: #67C23A; font-size: 14px; line-height: 20px;">{{ act.finishDate
              }}</div>
            <div v-else style="color: #E6A23C; font-size: 14px; line-height: 20px;">{{ act.taskName === '办理人' ? '办理中'
              :'审批中' }}</div>
            <el-row>
              <el-col :span="14">
                <div v-if="act.remark !== '开始节点自动完成'" style="color: green; font-size: 12px; line-height: 20px;">
                  意见：{{ act.remark || '无' }}</div>
              </el-col>
              <el-col :span="10">
                <div v-if="act.sign != null && act.sign !== '' && act.taskName === '审批人'">
                  <el-image style="width: 80px; height: 30px;" :src="act.sign" fit="contain">
                    <div slot="error" class="image-slot">
                      无法识别
                    </div>
                  </el-image>
                </div>
              </el-col>
            </el-row>

          </div>
        </div>
      </el-card>
      <el-card v-if="!act" shadow="never">
        <!-- 没有任务的情况 -->
        <span>{{ act.taskName }}</span>
        <span style="font: 12px Extra Small; color: #909399; margin-left: 10px;">{{ (act.description || '') }}</span>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>

<script>
import { timeLine, timeLinePreview } from '@/api/process'

export default {
  name: "TimeLine",
  components: {},
  props: {
    current: {
      default: 'root'
    }
  },
  data() {
    return {
      loading: false,
      activities: []
    }
  },
  mounted() {
  },
  computed: {

  },
  methods: {
    getActivities() {
      return this.activities;
    },
    timestamp(act) {
      if (act.activityKey === this.current) {
        return act.createDate;
      } else {
        return '';
      }
    },
    timeLineType(act) {
      if (act.activityKey === this.current) {
        return 'warning'
      } else if (act.finishDate) {
        return 'success';
      } else {
        return 'primary';
      }
    },
    fresh(defId, json) {
      this.loading = true;
      this.activities = []
      timeLinePreview(defId, json).then(res => {
        this.loading = false;
        this.activities = res.data;
      });
    },
    freshForInst(instId) {
      this.loading = true;
      this.activities = []
      timeLine(instId).then(res => {
        this.loading = false;
        //处理签名字符串
        // res.data.forEach(act => {
        //   act.forEach(task => {
        //     if (task.sign != null && task.sign !== '') {
        //       task.sign = decodeURIComponent(task.sign);
        //     }
        //   });
        // })
        this.activities = res.data;
      });
    }
  }
}
</script>

<style lang="less" scoped>
.process-form {
  /deep/ .el-form-item__label {
    padding: 0 0;
  }
}
</style>
